{include file="public/_header"}
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <a class="layui-btn" href="{:url('add')}"><i class="layui-icon"></i>添加</a>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="tableContainer" lay-filter="tableContainer"></table>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/_footer"}
<script>
    layui.use(['layer', 'form', 'admin', 'table', 'util','xmSelect'], function(){
        var table = layui.table,
            $ = layui.$,
            element = layui.element;
        initTable();
        function initTable() {
            var url = '{:url("getData")}';
            table.render({
                elem: '#tableContainer'
                ,url: url //数据接口
                ,page: true
                ,cols:  [[ //标题栏
                    {
                        field:'id',
                        title:"ID",
                        width:'5%'
                    },
                    {
                        field:'user_name',
                        title:"用户名",
                        width:'20%'
                    },
                    {
                        field:'name',
                        title:"姓名",
                        width:'15%'
                    },
                    {
                        field:'group',
                        title:"角色",
                        width:'15%'
                    },
                    {
                        field:'create_time',
                        title:"创建时间",
                        width:'15%'
                    },
                    {
                        fixed:'right',
                        title:"操作",
                        width: '30%',
                        align:'center',
                        toolbar: '#barDemo'
                    }
                ]]
            });
        }

        // 监听操作事件
        table.on('tool(tableContainer)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗？', {
                    btn: ['确定', '取消']
                }, function (e) {
                    doDel(obj.data.id);
                });
            }else if(obj.event === 'edit') {
                window.location.href = "{:url('edit')}?id=" + data.id;
            }
        });
        function doDel(id) {
            var data = {
                'id': id
            };
            $.getJSON("{:url('del')}", data, function (res) {
                layer.msg(res.msg);
                setTimeout(function () {
                    window.location.href = "{:url('index')}";//'index.html';
                }, 500);
            });
        }
    });
</script>
<script type="text/html" id="barDemo">
    {{#  if (d.id !== 1) { }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>
</body>
</html>